/*
 * @Description: 提交订单的结果页
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:41:40
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-08-23 16:22:24
 */
<template>
  <div
    class="result_main fontsize32"
    v-wechat-title="type.msg"
  >
    <div class="result_icon">
      <img :src="type.icon">
    </div>
    <div class="result_msg">
      <p class="msg_main fontsize48">{{type.msg}}</p>
      <p
        class="msg_alert"
        v-show="type.alert.length > 0"
      >{{type.alert}}</p>
    </div>
    <!-- <div
      v-if="type.faceSwiping"
      class="face_swiping"
    >
      <img :src="type.faceSwiping">
    </div> -->
    <div class="result_btn">
      <p
        class="remark fontsize28"
        v-if="type.remark"
      >{{type.remark}}</p>
      <button
        class="fontsize32"
        v-show="type.firstBtn.length > 0"
      >{{type.firstBtn}}</button>
      <button
        v-show="type.secondBtn.length > 0"
        class="second_btn fontsize32"
      >{{type.secondBtn}}</button>
    </div>
  </div>
</template>

<script>
import { setTimeout } from 'timers'
export default {
  data () {
    return {
      type: { // 当前订单状态，默认为查询中
        icon: require('@static/img/query.png'),
        msg: '支付结果查询中',
        alert: '',
        firstBtn: '',
        secondBtn: ''
      },
      payFailed: { // 支付失败
        icon: require('@static/img/failed.png'),
        msg: '支付失败',
        alert: '支付遇到问题，请尝试重新支付',
        firstBtn: '重新支付',
        secondBtn: '取消'
      },
      paySucceed: { // 支付成功
        icon: require('@static/img/succeed.png'),
        msg: '支付成功',
        alert: '请稍后，正在努力为您出票',
        firstBtn: '正在查询出票结果...',
        secondBtn: ''
      },
      buyFailed: { // 支付成功但购票失败
        icon: require('@static/img/failed.png'),
        msg: '购票失败',
        alert: '金额将在1 - 3个工作日退回原支付账户',
        firstBtn: '查看其它班次',
        secondBtn: '返回首页'
      },
      buySucceed: { // 支付成功且购票成功
        icon: require('@static/img/succeed.png'),
        msg: '购票成功',
        alert: '请提前十分钟达到候车点候车',
        firstBtn: '购买返程',
        secondBtn: '完成',
        // faceSwiping: require('@static/img/face-swiping.png'),
        remark: '可在“定制班线 - 我的车票”中查看已购买的车票'
      }
    }
  },
  mounted () {
    setTimeout(() => { // 模拟支付-购票过程
      this.type = this.paySucceed
      setTimeout(() => {
        this.type = this.buySucceed
      }, 3000)
    }, 3000)
  }
}
</script>

<style lang="scss" scoped>
.result_main {
  width: 100%;
  height: fill-available;
  position: relative;
  padding-top: 52px;
  .result_icon {
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    margin: 0 auto;
    margin-bottom: 64px;
    img {
      width: 100%;
    }
  }
  .result_msg {
    text-align: center;
    .msg_main {
      color: #027aff;
    }
    .msg_alert {
      margin-top: 16px;
      color: #666;
    }
  }
  .face_swiping {
    width: 622px;
    margin: auto;
    margin-top: 256px;
    img {
      width: 100%;
    }
  }
  .result_btn {
    height: 208px;
    position: absolute;
    bottom: 132px;
    .remark {
      height: 40px;
      line-height: 40px;
      margin-bottom: 32px;
      text-align: center;
      color: #666;
      margin-top: -72px;
    }
    button {
      width: 686px;
      height: 72px;
      margin: 32px;
      margin-top: 0;
      border: 0;
      border-radius: 25px; /*no*/
      color: #fff;
      background-color: #027aff;
      box-shadow: 0 0 2px #027aff; /*no*/
    }
    .second_btn {
      background-color: #fff;
      color: #027aff;
    }
  }
}
</style>
